@import "../color-vars.scss";

$padding-top: 30px;

//底部对齐
$left-chart-height: calc((100% - 115px) / 3);
.layout-map {
	position: absolute;
	top: 75px;
	left: 20%;
	box-sizing: border-box;
	justify-content: center;
	width: 60%;
	height: calc(100% - $left-chart-height - 66px);
	.map-panel {
		position: relative;
		width: 100%;
		height: 100%;
		.linear-gradient {
			position: absolute;
			z-index: 9;
		}
		.top-linear-gradient {
			top: 0;
			width: 100%;
			height: 15%;
			background: linear-gradient(180deg, #f3faff 0%, rgb(243 250 255 / 0%) 100%);
			border-radius: 0;
			opacity: 1;
		}
		.bottom-linear-gradient {
			bottom: 0;
			width: 100%;
			height: 15%;
			background: linear-gradient(180deg, rgb(243 250 255 / 0%) 0%, #f3faff 100%);
			border-radius: 0;
			opacity: 1;
		}
		.left-linear-gradient {
			left: 0;
			width: 15%;
			height: 100%;
			background: linear-gradient(270deg, rgb(243 250 255 / 0%) 0%, #f3faff 100%);
		}
		.right-linear-gradient {
			right: 0;
			width: 15%;
			height: 100%;
			background: linear-gradient(90deg, rgb(243 250 255 / 0%) 0%, #f3faff 100%);
			border-radius: 0;
			opacity: 1;
		}
		.l7-popup .l7-popup-content {
			padding: 0;
		}
		.device-popup {
			width: 400px;
			font-size: 13px;
			line-height: 28px;
			border: 1px solid #afd6f5;
			.item-row {
				border-bottom: 1px solid #afd6f5;
				.data-header {
					width: 100%;
					padding: 5px 10px;
					font-weight: bold;
					background: #f1f1f1;
				}
				.label {
					width: 80px;
					padding-right: 10px;
					text-align: right;
					border-right: 1px solid #afd6f5;
				}
				.value {
					flex: 1;
					padding-right: 10px;
					padding-left: 10px;
					.link {
						color: var(--el-color-primary);
						cursor: pointer;
					}
					.link:hover {
						opacity: 0.8;
					}
				}
			}
			.item-row:last-child {
				border-bottom: none;
			}
		}
		.device-alarm-popup {
			width: 280px;
			height: 100px;
			background: #ffffff;
			border-radius: 4px;
			box-shadow: 0 0 6px 1px rgb(57 72 84 / 30%);
			opacity: 1;
			.type {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				width: 60px;
				height: 100%;
				padding: 10px;
				font-size: 14px;
				font-weight: 500;
				color: #ffffff;
				text-align: center;
				background: linear-gradient(180deg, #ffbc65 0%, #fb3333 100%);
				border-radius: 4px 0 0 4px;
				opacity: 1;
			}
			.data {
				box-sizing: border-box;
				display: inline-grid;
				flex: 1;
				align-items: center;
				height: 100%;
				padding: 10px 15px;
				.label {
					position: relative;
					display: flex;
					align-items: center;
					font-size: 14px;
					font-weight: bold;
					color: #222222;
					&::before {
						display: block;
						width: 12px;
						height: 12px;
						margin-right: 5px;
						content: "";
						background: #fb3433;
						border-radius: 50%;
						opacity: 0.1;
					}
					&::after {
						position: absolute;
						left: 5px;
						display: block;
						width: 5px;
						height: 5px;
						content: "";
						background: #fb3433;
						border-radius: 50%;
						opacity: 1;
					}
				}
				.info {
					font-size: 14px;
					font-weight: bold;
					color: #fb3433;
				}
				.tips {
					font-size: 14px;
					font-weight: 500;
					color: #555555;
				}
			}
		}
	}
}
.system-chart {
	top: calc($left-chart-height * 2 + 115px);
	left: 50%;
	box-sizing: border-box;
	width: 50%;
	min-width: auto !important;
	max-width: none !important;
	height: $left-chart-height;
	padding: 15px 0;
	transform: translateX(-50%);
	.btn {
		display: flex;
		align-items: center;
		padding: 3px 10px;
		margin-top: 10px;
		margin-right: 10px;
		color: #555555;
		cursor: pointer;
		background: #eef5fb;
		border: 1px solid #a7c0d4;
		border-radius: 2px;
	}
	.btn:hover,
	.active.btn {
		color: #0070cc;
		background-color: #c8dbf2;
	}
	.active.btn {
		border: 1px solid #2e68ea;
	}
	.content {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: calc(100% - 36px);
		.chart {
			width: 100%;
			height: 100%;
		}
	}
}
.total-data {
	position: absolute;
	top: 30px;
	left: 50%;
	z-index: 9;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	width: 50%;
	transform: translateX(-50%);
	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 8%;
		cursor: pointer;
		.icon {
			width: 42px;
			height: 42px;
			background-image: url("@/assets/images/dashboard/icon-5.png");
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
		}
		.icon-1 {
			background-image: url("@/assets/images/dashboard/icon-5.png");
		}
		.icon-2 {
			background-image: url("@/assets/images/dashboard/icon-6.png");
		}
		.icon-3 {
			background-image: url("@/assets/images/dashboard/icon-8.png");
		}
		.icon-4 {
			background-image: url("@/assets/images/dashboard/icon-7.png");
		}
		.value {
			flex: 1;
			padding-left: 10px;
			.label {
				color: $sub-title-color;
			}
			.text {
				height: 28px;
				font-size: 22px;
				font-weight: bold;
				color: $value-color;
			}
		}
	}
	.item:first-child {
		margin-left: 0;
	}
	.item:hover {
		opacity: 0.7;
		.text {
			color: $primary-color;
		}
	}
}
